@charset "UTF-8";
/*1.文本的编码集:UTF-8  万国码---避免乱码*/
/*2.统一元素：盒子模型问题：外边距（元素存在默认外边距）、内边距、内容、边框*/
*{
    margin:0;
    padding: 0;
}
/*3.添加背景图片*/
body{
    background: url(img/bj.png) no-repeat;
    background-size: 100% 950px;
}
/*4.美化文字*/
h1{
    font-size: 100px;
    font-family: "华文彩云";
}
/*5.熊猫*/
#bear{
    width: 500px;
    height: 500px;
    border: 1px solid red;
    /*背景图片：灵活（页面切换图片）*/
    background: url(img/g1.png) no-repeat;
    background-size: 500px 500px;
    /* 相对定位*/
    position: relative;
    left: -16px;
    top: 19px;
    /*动画: 拿起手翻书10s内匀速无限次重复动画*/
    animation: bear 10s linear infinite;
}
/*6.熊猫动画--关键帧*/
@keyframes bear {
    0%{
        /*初始值：位置、大小、图片不变*/
        background: url(img/g1.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(1) ;
        left: -16px;
        top: 19px;
    }
    10%{
        background: url(img/g2.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(1.2) ;
        left: -16px;
        top: 19px;
    }
    20%{
        background: url(img/g3.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(1.4) ;
        left: 600px;
        top: 300px;
    }
    30%{
        background: url(img/g4.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(0.8) ;
        left: 400px;
        top: -200px;
    }
    40%{
        background: url(img/g5.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(1.8) ;
        left: 645px;
        top: 145px;
    }
    50%{
        background: url(img/g6.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(360deg) scale(1.2) ;
        left: 800px;
        top: 600px;
    }
    60%{
        background: url(img/g7.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(.8) ;
        left: 463px;
        top: 320px;
    }
    70%{
        background: url(img/g8.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(1.8) ;
        left: -160px;
        top: 230px;
    }
    80%{
        background: url(img/gtq1.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(.8) ;
        left: 452px;
        top: 102px;
    }
    90%{
        background: url(img/x1x2.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(50deg) scale(1) ;
        left: 542px;
        top: 21px;
    }
    100%{
        background: url(img/xd.png) no-repeat;
        background-size: 500px 500px;
        transform: rotate(0deg) scale(2.2) ;
        left: 645px;
        top: 335px;
    }
}







